<template>
  <!-- 头部导航页面 -->
  <header class="header">
    <div class="header__logo">
      <img src="../assets/logo.png" class="logo" alt="" />
      <span class="title">校园共享单车后台管理系统</span>
    </div>
    <div class="header__user">
      <img
        v-if="!user.avatar"
        class="header__user--logo"
        src="../assets/avatar.png"
        alt=""
      />
      <img class="header__user--logo" :src="user.avatar" alt="" />
      <el-dropdown trigger="click" @command="setDialogInfo">
        <span class="user--name">
          {{ user.name }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>
<script>
export default {
  name: "Headers",
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    setDialogInfo(cmdItem) {
      switch (cmdItem) {
        case "a":
          this.logout();
          break;
      }
    },
    showInfoList() {
      this.$router.push("/infoshow");
    },
    logout() {
      // 清除token
      localStorage.removeItem("eleToken");
      localStorage.removeItem("userInfo");
      // 设置vuex store
      this.$store.dispatch("clearCurrentState");

      // 跳转
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  overflow: hidden;
  height: 50px;
  background: #2183ed;
  line-height: 50px;
  font-family: "PingFangSC-Regular";
  font-size: 16px;
  color: #b3d7ff;
  align-items: center;
  display: flex;
  .header__logo {
    margin-left: 30px;
    height: 32px;
    background-size: 70% 70%;
    align-items: center;
    display: flex;

    flex: 1;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .header__user {
    margin-right: 30px;
    .header__user--logo {
      height: 32px;
      width: 32px;
      border-radius: 50%;
      margin-right: 11px;
      vertical-align: middle;
    }
  }
  .user--name {
    color: #fff;
  }
}
</style>
